<template>
  <view class="page">
    <view class="search-bar">
      <view class="search-input">
        <input type="text" v-model="keywords" placeholder="请输入短信内容" />
        <image class="icon-search" src="/static/images/icon_search.png" mode=""></image>
        <view class="search-button" @click="search">搜索</view>
      </view>
    </view>
    <u-dropdown class="dropdown" :close-on-click-mask="mask" :activeColor="activeColor" :borderBottom="borderBottom">
      <u-dropdown-item @change="channelTypeChange" v-model="channelType" :title="channelTypeTitle"
        :options="channelTypeOption"></u-dropdown-item>
      <u-dropdown-item @change="statusChange" v-model="status" :title="statusTitle"
        :options="statusOption"></u-dropdown-item>
      <u-dropdown-item @change="sendStatusChange" v-model="sendStatus" :title="sendStatusTitle"
        :options="sendStatusOption"></u-dropdown-item>
    </u-dropdown>
    <scroll-view class="scroll-list" scroll-y="true" @scrolltolower="loadMore">
      <view class="message-list">
        <view v-for="(item, index) in list" :key="index" class="message-item" @click="navTo('detail?id='+item.id)">
          <view class="message-item-hd">短信主题：</view>
          <view class="message-item-bd">
            <view class="message-title">{{getContent(item.msgContent)}}</view>
            <view class="message-meta">
              <view class="message-count">短信数量：<view class="number">{{item.receivers.split(',').length}}</view>
              </view>
              {{item.createTime}}
            </view>
            <view class="message-status" :class="{success: item.sendStatus === 0, warning: item.sendStatus === 2}">
              {{item.sendStatusName}}
            </view>
          </view>
        </view>
      </view>
      <!-- <view class="uni-list" v-for="(item, index) in list" :key="index" style="margin-top: 5rpx;margin-bottom: 5rpx;"
        @click="navTo('detail?id='+item.id)">
        <u-row gutter="16" style="margin-top: 20rpx;">
          <u-col span="1"
            style="word-break:break-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;">
            <u-icon style="margin-right: 10rpx;" :name="getIconName(item)" color="#2b85e4" size="45"></u-icon>
          </u-col>
          <u-col span="8"
            style="word-break:break-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;">
            {{getContent(item.msgContent)}}
          </u-col>
          <u-col span="3" style="text-align: right;">
            <view v-if="item.sendStatus===2">
              <font style="border:1px solid orange; color: orange;">{{item.sendStatusName}}</font>
            </view>
            <view v-else-if="item.sendStatus===0" style="color:green;">
              <text style="border:1px solid green;">{{item.sendStatusName}}</text>
            </view>
            <view v-else style="color:red;">
              <text style="border:1px solid red;">{{item.sendStatusName}}</text>
            </view>
          </u-col>
        </u-row>
        <u-row gutter="16" style="margin-top: 20rpx;">
          <u-col span="1">

          </u-col>
          <u-col span="11">
            <view style="text-align: left;color: gray;">
              {{item.createTime}}
            </view>
          </u-col>
        </u-row>
      </view> -->
      <u-loadmore class="loadmore" :status="loadStatus"></u-loadmore>
    </scroll-view>
  </view>
</template>
<script>
  import $time from '@/common/time.js';
  import JsPicker from '@/components/js-picker/js-picker.vue';
  export default {
    data() {
      return {
        keywords: '',
        query: {
          current: 1,
          size: 10
        },
        swiperCurrent: 0,
        list: [],
        pages: 0,
        loadStatus: 'loadmore',
        options: [],
        headStyle: {
          fontWeight: 'bold',
          color: '#606266',
          margin: '16rpx'
        },
        borderBottom: false,
        activeColor: '#3989FC',
        mask: true,
        sendStatusOption: [],
        statusOption: [],
        channelTypeOption: [],
        sendStatus: '',
        status: '',
        channelType: '',
        channelTypeTitle: '通道类型',
        sendStatusTitle: '发送状态',
        statusTitle: '提交状态',
      };
    },
    onLoad() {
      this.loadList();
      this.initSendStatus();
      this.initChannelType();
      this.initStatus();
    },
    computed: {

    },
    methods: {
      navTo(url) {
        uni.navigateTo({
          url: url
        });
      },
      search(value) {
        this.list = [];
        this.query.current = 0;
        this.loadList();
      },

      loadList() {
        this.query.keywords = this.keywords;
        this.$u.api.message.msgSendRecord.list(this.query).then(res => {
          if (!res.data.records || res.data.records.length == 0) {
            this.loadStatus = "nomore";
            return;
          }
          res.data.records.forEach((item) => {
            // item.msgContent = JSON.parse(item.msgContent);
            item.show = false;
          })
          this.list = this.list.concat(res.data.records);
          this.pages = res.pages;
          this.query.current = res.data.current;
          this.query.size = res.data.size;
          this.loadStatus = "loadmore";
        });
      },
      loadMore() {
        this.loadStatus = "loading";
        setTimeout(() => {
          this.query.current += 1;
          this.loadList();
        }, 100);
      },
      getContent(value) {
        try {
          let data = JSON.parse(value)
          let content = data?.textcard?.title
          if (content) {
            return content
          } else {
            let res = value.replace(/<.+?>/g, '').replace(/&nbsp;/ig, '').replace(/\s/ig, '');
            return res;
          }
        } catch (e) {
          let res = value.replace(/<.+?>/g, '').replace(/&nbsp;/ig, '').replace(/\s/ig, '');
          return res;
        }
      },
      getIconName(row) {
        if (row.channelType === 1) {
          return "chat";
        } else if (row.channelType === 2) {
          return "email";
        } else {
          return "order";
        }
      },
      getStatusName(row) {
        if (row.sendStatus === 0) {
          return "发送成功";
        } else if (row.sendStatus === 2) {
          return "上游处理中";
        } else {
          return "发送失败";
        }
      },
      initSendStatus() {
        this.$u.api.dictBizData({
          code: 'ChannelResResultType'
        }).then(res => {
          let detaiList = [];
          let detailJson = {
            'label': '全部',
            'value': ''
          }
          detaiList.push(detailJson)
          res.data.forEach((item) => {
            detaiList.push({
              'label': item.dictValue,
              'value': item.dictKey
            });
          })
          this.sendStatusOption = detaiList;
        });
      },
      initStatus() {
        this.$u.api.dictBizData({
          code: 'ChannelReqResultType'
        }).then(res => {
          let detaiList = [];
          let detailJson = {
            'label': '全部',
            'value': ''
          }
          detaiList.push(detailJson)
          res.data.forEach((item) => {
            detaiList.push({
              'label': item.dictValue,
              'value': item.dictKey
            });
          })
          this.statusOption = detaiList;
        });
      },
      initChannelType() {
        this.$u.api.dictBizData({
          code: 'message_channel_type'
        }).then(res => {
          let detaiList = [];
          let detailJson = {
            'label': '全部',
            'value': ''
          }
          detaiList.push(detailJson)
          res.data.forEach((item) => {
            detaiList.push({
              'label': item.dictValue,
              'value': item.dictKey
            });
          })
          this.channelTypeOption = detaiList;
        });
      },
      sendStatusChange(index) {
        this.list = [];
        this.query.current = 0;
        this.query.sendStatus = index
        this.sendStatusTitle = (index === '' ? '发送状态' : this.getOptionLabel(this.sendStatusOption, index));
        this.loadList()
      },
      statusChange(index) {
        this.list = [];
        this.query.current = 0;
        this.query.status = index
        this.statusTitle = (index === '' ? '提交状态' : this.getOptionLabel(this.statusOption, index));
        this.loadList()
      },
      channelTypeChange(index) {
        this.list = [];
        this.query.current = 0;
        this.query.channelType = index
        this.channelTypeTitle = (index === '' ? '通道类型' : this.getOptionLabel(this.channelTypeOption, index));
        this.loadList()
      },
    }
  };
</script>
<style lang="scss">
  .page {
    position: relative;
    background: #F7F7F7;
  }

  .search-bar {
    display: flex;
    align-items: center;
    padding: 16rpx 32rpx;
    background: #fff;
  }

  .search-input {
    position: relative;
    width: 100%;
    height: 64rpx;
    border-radius: 32rpx;
    background: #F7F7F7;
    overflow: hidden;

    input {
      width: 100%;
      height: 64rpx;
      border: 0;
      padding: 0 144rpx 0 64rpx;
      outline: 0;
      line-height: 64rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #999;
      background: transparent;
    }

    .icon-search {
      position: absolute;
      top: 21rpx;
      left: 21rpx;
      width: 22rpx;
      height: 22rpx;
    }

    .search-button {
      position: absolute;
      top: 0;
      right: 0;
      width: 144rpx;
      border-radius: 32rpx;
      line-height: 64rpx;
      text-align: center;
      font-size: 24rpx;
      font-weight: 700;
      color: #fff;
      background: #3989FC;
    }
  }

  .dropdown {
    height: 80rpx;
    background: #fff;
  }

  .scroll-list {
    height: calc(100vh - var(--window-top) - var(--window-bottom) - 96rpx - 80rpx);

    .loadmore {
      padding: 32rpx;
    }
  }

  .message-list {
    display: flex;
    flex-direction: column;
    padding: 32rpx 24rpx 0;
  }

  .message-item {
    width: 100%;
    border-radius: 8rpx;
    padding: 24rpx;
    background: #fff;

    &+.message-item {
      margin-top: 32rpx;
    }
  }

  .message-item-hd {
    margin-bottom: 24rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #666;
  }

  .message-title {
    margin-bottom: 24rpx;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 32rpx;
    font-weight: 700;
    color: #333;
    overflow: hidden;
  }

  .message-meta {
    display: flex;
    align-items: center;
    margin-bottom: 24rpx;
    font-weight: 500;
    font-size: 28rpx;
    color: #999;
  }

  .message-count {
    display: inline-flex;
    align-items: center;
    width: 240rpx;
    font-size: 24rpx;
    font-weight: 500;
    color: #999;

    .number {
      flex: 1;
      font-size: 28rpx;
      color: #3989FC;
    }
  }

  .message-status {
    display: inline-block;
    border-radius: 24rpx;
    padding: 0 24rpx;
    line-height: 48rpx;
    text-align: center;
    font-size: 24rpx;
    font-weight: 500;
    color: #D43030;
    background: rgba(212, 48, 48, .15);

    &.success {
      color: #3989FC;
      background: #DEEBFE;
    }

    &.wraning {
      color: #FF6600;
      background: rgba(255, 102, 0, .15);
    }
  }
</style>